<template>
  <div>
    <div v-if="!isShowDetail">
      <jxf-titletip :title="title"  @refreshPage="refreshFuc"></jxf-titletip>
      <el-card class="mt20">
        平台默认运费规则： 初始{{defaultShip.firstKm ? defaultShip.firstKm : '0'}}公里{{defaultShip.firstKmPrice ? defaultShip.firstKmPrice : '0'}}元， 每增加{{defaultShip.leftKm ? defaultShip.leftKm : '0'}}公里增加{{defaultShip.leftKmPrice ? defaultShip.leftKmPrice : '0'}}元
      </el-card>
      <el-card class="mt20">
        <el-form :inline="true" :model="searchInfo" ref="searchInfo">
          <el-form-item label="地区:" prop="cityName">
            <el-input v-model="searchInfo.cityName" clearable @keyup.enter.native="enterNextInput('planName')" ref="input-cityName"></el-input>
          </el-form-item>
          <el-form-item label="方案名称:" prop="planName">
            <el-input v-model="searchInfo.planName" clearable @keyup.enter.native="onSearch" ref="input-planName"></el-input>
          </el-form-item>
          <!--<jxf-Date label="设置时间:" :startTime.sync="searchInfo.startTime" :endTime.sync="searchInfo.endTime"></jxf-Date>-->
          <el-form-item label="状态:" prop="isDelete">
            <el-select v-model="searchInfo.isDelete" clearable placeholder="全部">
              <el-option label="生效中" value="0"></el-option>
              <el-option label="已失效" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch()">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="resetForm('searchInfo')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="jxf-table-card mt20">
        <div slot="header" class="clearfix">
          <span>数据列表</span>
          <div>
            <el-button type="primary" @click="exportExcel" :loading="isSuccess">导出</el-button>
          </div>
        </div>
        <jxf-table class="" :table="dataTable">
          <template slot="firstKmPrice" slot-scope="ship">
            <div>￥{{ ship.row.firstKmPrice && ship.row.firstKmPrice != 0 ? formatMoney.twoDecimal(ship.row.firstKmPrice) : '0.00'}}</div>
          </template>
          <template slot="leftKmPrice" slot-scope="ship">
            <div>￥{{ ship.row.leftKmPrice && ship.row.leftKmPrice != 0 ? formatMoney.twoDecimal(ship.row.leftKmPrice) : '0.00'}}</div>
          </template>
          <template slot="createTime" slot-scope="ship">
            <div>{{ship.row.createTime ? FormatDate.timeFormat(ship.row.createTime) : ""}}</div>
          </template>
          <template slot="isDelete" slot-scope="ship">
            <div v-if="ship.row.isDelete === 0">生效中</div>
            <div v-if="ship.row.isDelete === 1">已失效</div>
          </template>
          <template slot="operation" slot-scope="ship">
            <el-button type="text" @click="watchDetail(ship.row.id)">查看</el-button>
          </template>
        </jxf-table>
      </el-card>
      <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                      @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
    </div>
    <CompanySetting v-if="isShowDetail" :dataInfo="dataInfo" @goBack="goBack"></CompanySetting>
  </div>
</template>

<script>
  import formatMoney from '@/assets/js/formatMoney'
  import FormatDate from '@/assets/js/formatDate'
  import CompanySetting from './CompanySetting'
    export default {
        name: "PlatformSetting",
        components: { CompanySetting },
        data() {
          return {
            title: "运费设置",
            searchInfo: {
              cityName: "",
              planName: "",
              isDelete: null
            },
            isSuccess: false,
            dataInfo: {},
            defaultShip: {},
            isShowDetail: false,
            formatMoney: formatMoney,
            FormatDate: FormatDate,
            dataTable: {
              border:true,
              loading:false,
              hasSelect:false,
              tr: [
                {
                  id: '1',
                  label: '地区',
                  fixed: "left",
                  prop: 'cityName'
                },
                {
                  id: '2',
                  label: '方案名称',
                  minWidth: '140',
                  prop: 'planName'
                },
                {
                  id: '3',
                  minWidth: '140',
                  label: '基础共计（公里）',
                  prop: 'firstKm'
                },
                {
                  id: '4',
                  minWidth: '120',
                  label: '运费（元）',
                  show: 'template',
                  prop: 'firstKmPrice'
                },
                {
                  id: '5',
                  minWidth: '140',
                  label: '增加公里（公里）',
                  prop: 'leftKm'
                },
                {
                  id: '6',
                  minWidth: '120',
                  label: '增加运费（元）',
                  show: 'template',
                  prop: 'leftKmPrice'
                },
                {
                  id: '7',
                  label: '设置时间',
                  width: '160',
                  show: 'template',
                  prop: 'createTime'
                },
                {
                  id: '8',
                  label: '状态',
                  show: 'template',
                  prop: 'isDelete'
                },
                {
                  id: '9',
                  label: '操作',
                  show: 'template',
                  fixed: 'right',
                  minWidth:"80",
                  prop: 'operation'
                }
              ],
              data: []
            },
            pageTotal:0,
            pageSize:10,
            currentPage:1
          }
        },
        methods: {
          // 导出
          exportExcel() {
            this.isSuccess = true;
            let data = {
              ...this.searchInfo,
              pageNum: this.currentPage,
              pageSize: this.pageSize
            }
            ajax.export(apis.setting.exportFreight, data).then((res) => {
              this.isSuccess = false;
              if(res.code) {
                if(res.code === "10000000") {

                } else {
                  this.$message.error(res.message)
                }
              }
            })
          },
          getDefaultShip() {
            ajax.get(apis.setting.getDefaultFreight).then(result => {
              if(result.code == '10000000') {
                this.defaultShip = result.data;
              } else {
                this.$message.error(result.message)
              }
            })
          },
          refreshFuc() {
            this.resetForm('searchInfo')
            this.currentPage = 1;
            this.pageSize = 10;
            this.getData()
          },
          goBack() {
            this.isShowDetail = false;
          },
          watchDetail(id) {
            let data = {
              id: id
            }
            ajax.get(apis.setting.getCompanyShip, data).then(result => {
              if(result.code == "10000000") {
                this.dataInfo = result.data;
                this.isShowDetail = true
              } else {
                this.$message.error(result.message)
              }
            })
          },
          getData() {
            this.dataTable.loading = true
            let data = {
              ...this.searchInfo,
              page: this.currentPage,
              pageSize: this.pageSize
            }
            ajax.post(apis.setting.getPlatformList, data).then(result => {
              if(result.code == "10000000") {
                this.dataTable.data = result.data.dataList;
                this.pageTotal = result.data.total;
              } else {
                this.$message.error(result.message)
              }
              this.dataTable.loading = false
            })
          },
          onSearch() {
            this.currentPage = 1;
            this.getData()
            this.getDefaultShip()
          },
          enterNextInput(inputName) {
            this.$refs["input-" + inputName].focus();
          },
          resetForm(formName) {
            this.$refs[formName].resetFields()
          },
          // 切换页面
          currentPageChange(pageNo) {
            this.currentPage = pageNo
            this.getData()
          },
          // 切换页面条数
          pageSizeChange(pageNo) {
            this.pageSize = pageNo
            this.getData()
          },
        },
        created() {
          this.onSearch()
        }
    }
</script>

<style scoped>

</style>
